<!DOCTYPE html>
<html>
<head>
<title>用户管理</title>
#@head()
</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-3">
				<div class="ibox ibox-body">
					<div class="ibox-title">
						<h5>选择部门</h5>
					</div>
					<div class="ibox-content">
						<div id="jstree"></div>
					</div>
				</div>
			</div>
			<div class="col-sm-8" style="width:74%;">
				<div class="ibox">
					<div class="ibox-title">
						<h5>用户列表</h5>
					</div>
					<div class="ibox-content">
						<div class="fixed-table-toolbar">
							<div class="columns pull-left">
								<button  type="button"
									class="btn  btn-primary" onclick="add()">
									<i class="fa fa-plus hidden" aria-hidden="true"></i>添加
								</button>
								<button  type="button"
									class="btn  btn-danger" onclick="batchRemove()">
									<i class="fa fa-trash hidden" aria-hidden="true"></i>删除
								</button>
							</div>
							<div class="columns pull-right">
								<button class="btn btn-success" onclick="reLoad()">查询</button>
							</div>

							<div class="columns pull-right ">
								<input id="searchName" type="text" class="form-control"
									placeholder="">
							</div>

							<div class="columns pull-right ">
								<select name="searchField" id="searchField" class="form-control" ></select>
							</div>
						</div>
						<table id="exampleTable" class="table table-hover table-bordered " data-mobile-responsive="true">
						</table>
					</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
#@footer()

<script type="text/javascript">
	var columns = [
        { checkbox: true },
        { field: 'id', title: 'ID' },
        { field: 'username', title: '登录名' },
        { field: 'name', title: '名称' },
        { field: 'email', title: '邮箱' },
        { field: 'mobile', title: '手机号' },
        { field: 'statusName', title: '状态' },
        {
            field: 'id',
            title: '操作' ,
            formatter: function(value,row){
                var str = '<a href="#" onclick="edit('+value+')">修改</a>';
                return str;
            }
        }
    ];

function load(deptId){
	$.initBootstrapTable("#exampleTable", {
		idField : "id",
	    url: "dataAjax",
	    queryParams: function(params) {
            return {
                // 传递参数查询参数
                searchField: $('#searchField').val(),
                searchName: $('#searchName').val(),
                offset: (params.offset / params.limit) + 1,
                limit:   params.limit,
                deptId: deptId
            };
        },
	    columns :  columns
	});
}

function del(id){
	layer.confirm('您确定要删除嘛？',function(){
		$.post('delete/'+id,'',function(res){
			if(res.code==0){
				layer.msg(res.msg,{time:1000},function(){
					location.reload();
				})
			}
		})
	})
}
function add(){
	openWindow('添加','add')
}

function edit(id){
	openWindow('修改','edit?id='+id)
}

var prefix = ''; 
$(function(){
    var searchFieldHtml = '';
    for(var i=0;i<columns.length;i++){
        var data = columns[i];
        if (data.field!=undefined && data.field!='id'){
            searchFieldHtml += '<option value="'+data.field+'">'+data.title+'</option>';
        }
    }
    $("#searchField").html(searchFieldHtml);

	getTreeData();
	load('');
})

function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
}

function getTreeData() {
	$.ajax({
		type : "GET",
		url : "../dept/tree",
		success : function(tree) {
			loadTree(tree);
		}
	});
}
function loadTree(tree) {
    tree['selected'] = true;
	$('#jstree').jstree({
		'core' : {
			'data' : tree
		},
		"plugins" : [ "search" ]
	});
    console.log(tree)
	$('#jstree').jstree().open_all();
}
$('#jstree').on("changed.jstree", function(e, data) {
    console.log(e,data)
	if (data.selected == -1) {
		var opt = {
			query : {
				deptId : '',
			}
		}
		$('#exampleTable').bootstrapTable('refresh', opt);
	} else {
		var opt = {
			query : {
				deptId : data.selected[0],
			}
		}
		$('#exampleTable').bootstrapTable('refresh',opt);
	}

});

function batchRemove() {
    var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
    if (rows.length == 0) {
        layer.msg("请选择要删除的数据");
        return;
    }
    layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
        btn: ['确定', '取消']
        // 按钮
    }, function () {
        var ids = new Array();
        // 遍历所有选择的行数据，取每条数据对应的ID
        $.each(rows, function (i, row) {
            ids[i] = row['id'];
        });
        $.ajax({
            type: 'POST',
            data: {
                "ids": ids
            },
            url: prefix + 'batchRemove',
            success: function (r) {
                if (r.code == 0) {
                    layer.msg(r.msg);
                    reLoad();
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }, function () {

    });
}
</script>
</html>



